<template>
<div class="wel-main">
<!--  <el-button @click="login" type="primary">登陆啊烙铁</el-button>-->
  <div class="main-select" v-if="isShowSelectTeacher">
    <div class="select" >
      <div class="select-item" v-for="(item,index) in userList" :key='index' @click="totoken(item)">
        <div class="item-img">
          <img src="../../assets/welcome_images/teacher-img.png" alt="">
        </div>
        <div class="item-teacher" >
          <div class="teacherName">{{item.name}}</div>
          <div class="teacherSchoolName">{{item.pscShName}}</div>
        </div>
      </div>

    </div>

  </div>
  <div v-else class="main-center">
    <div class="center-left">
      <div class="left-title">数 字 引 领</div>
      <div class="left-title-small">让 校 园 更 智 慧</div>
      <div class="left-button">
<!--        <el-button type="primary">点击登录</el-button>-->
<!--        <button @click="login">点击登录</button>-->
      </div>
    </div>
    <div class="center-right">
      <img src="../../assets/welcome_images/right-image.png" alt="">
    </div>
  </div>

</div>
</template>

<script>
import axios from "axios"
export default {
  name: "index",
  data(){
    return {
      userList:[],
      isShowSelectTeacher:false
    }
  },
  mounted() {
    this.login()
  },
  methods:{
    getUrlCode(name) {
      return (
        decodeURIComponent(
          (new RegExp("[?|&]" + name + "=" + "([^&;]+?)(&|#|;|$)").exec(
            location.href
          ) || [, ""])[1].replace(/\+/g, "%20")
        ) || null
      );
    },
    login(){
      let code = this.getUrlCode("code");
      if(code){
        let formData = new FormData();
        Object.keys(this.$env.szxy_config).forEach((index) => {
          formData.append(index, this.$env.szxy_config[index])
        })
        formData.append("code", code);
        axios.post(this.$env.BASE_URL+"/user-center/httpProxy/doPost",formData,{
          headers: {
            "content-type": "multipart/form-data"
          }
        },).then(response=>{
          console.log(response);
          let res = response.data;

          if(res.code == 200){
            // res.result.userId = "95d4b836b5c9e16d9a69f2fcd8a8cf98"
            // let userId =  "95d4b836b5c9e16d9a69f2fcd8a8cf98"
            this.$store.dispatch("user/zhxyLogin",{userId:res.result.userId}).then(result=>{
              console.log(result);
              if(result.code == 200){
                this.$message.success("登陆成功");
                this.userList = result.result.userInfo;
                if(this.userList.length==1){
                  this.$store.commit("user/SET_TOKEN", this.userList[0].token);
                  this.$store.commit("user/SET_INFO", this.userList[0]);
                  window.sessionStorage.setItem("token", this.userList[0].token);
                  this.goIndex();
                  window.sessionStorage.setItem("userInfo", JSON.stringify(this.userList[0]))
                }else{
                  this.isShowSelectTeacher = true;
                }

              }else{
                this.$message.error(result.message);
              }
            })
          }else{
            this.$message.error("未查询到教师信息")
          }
        })
      }else{
        this.$message.error("未获取到code")
      }

    },
    totoken(item){
      this.$store.commit("user/SET_TOKEN", item.token);
      this.$store.commit("user/SET_INFO", item);
      window.sessionStorage.setItem("token", item.token)
      window.sessionStorage.setItem("userInfo", JSON.stringify(item));
      this.goIndex();
    },
    goIndex(){
      this.$router.push("/index");
    }
  }
}
</script>

<style lang="scss" scoped>
.wel-main {
  width: 100vw;
  height: 100vh;
  background: url("../../assets/welcome_images/back.png") no-repeat;
  background-size:100% 100% ;
  display: flex;
  justify-content: center;
  align-items: center;
  .main-center {
    width: 80%;
    height: 70%;
    background: rgba(255,255,255,.5);
    border-radius: 32px;
    display: flex;
    div{
      flex: 1;
    }
    .center-left{
      .left-title {
        text-shadow: 5px 5px 5px #76B5F9;
        font-size: 6.5rem;
        color: #ffffff;
        margin-top: 10vh;
        margin-left: 5vw;
      }
      .left-title-small{
        font-size: 2rem;
        color: #ffffff;
        margin-top: 2vh;
        margin-left: 5vw;
        text-shadow: 5px 5px 5px #76B5F9;
      }
      .left-button{
        margin-top: 30vh;
        margin-left: 5vw;
        button{
          padding: 1vh 2vw;
          font-size: 1.5rem;
          color: #FFFFFF;
          border: none;
          border-radius: 32px;
          background: #249BF8;
        }
      }

    }
    .center-right {
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 90%;
        height: 100%;
        object-fit: contain;
      }
    }
  }
  .main-select {
    width: 80%;
    background: rgb(255,255,255);
    border-radius: 32px;
    height: 70%;
    .select{
      display: flex;
      flex-flow: wrap;
      padding: 0 3vw;
      .select-item{
        margin-top: 3vh;
        display: flex;
        width: 18%;
        margin-left: 1vw;
        height: 10vh;
        background: #D8F0FD;
        border-radius: 16px;
        border: 3px solid #BCE3FC;
        .item-img{
          width: 40%;
          display: flex;
          justify-content: center;
          align-items: center;
          img{
            width: 80%;
            height: 80%;
            object-fit: contain;
          }
        }
        .item-teacher{
          width: 60%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          .teacherName{
            font-size: 1.2vw;
            font-weight: bold;
          }
          .teacherSchoolName{
            margin-top: 3vh;
            font-size: 1vw;
            color: #787C7E;
          }
        }
      }
    }

  }
}
</style>
